﻿.is-none {
    display: none;
}

.is-table {
    display: table !important;
}

.is-table-row {
    display: table-row !important;
}

.is-table-cell {
    display: table-cell !important;
}

.is-flex-row {
    flex-direction: row !important;
}

.is-flex-column {
    flex-direction: column !important;
}

.is-flex-row-reverse {
    flex-direction: row-reverse !important;
}

.is-flex-column-reverse {
    flex-direction: column-reverse !important;
}

.is-borderless {
    border: 0 !important;
}

@each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

        @each $prop, $abbrev in (margin: m, padding: p) {
            @each $size, $length in $spacers {

                .is-#{$abbrev}#{$infix}-#{$size} {
                    #{$prop}: $length !important;
                }

                .is-#{$abbrev}t#{$infix}-#{$size},
                .is-#{$abbrev}y#{$infix}-#{$size} {
                    #{$prop}-top: $length !important;
                }

                .is-#{$abbrev}r#{$infix}-#{$size},
                .is-#{$abbrev}x#{$infix}-#{$size} {
                    #{$prop}-right: $length !important;
                }

                .is-#{$abbrev}b#{$infix}-#{$size},
                .is-#{$abbrev}y#{$infix}-#{$size} {
                    #{$prop}-bottom: $length !important;
                }

                .is-#{$abbrev}l#{$infix}-#{$size},
                .is-#{$abbrev}x#{$infix}-#{$size} {
                    #{$prop}-left: $length !important;
                }
            }
        }
        // Some special margin utils
        .is-m#{$infix}-auto {
            margin: auto !important;
        }

        .is-mt#{$infix}-auto,
        .is-my#{$infix}-auto {
            margin-top: auto !important;
        }

        .is-mr#{$infix}-auto,
        .is-mx#{$infix}-auto {
            margin-right: auto !important;
        }

        .is-mb#{$infix}-auto,
        .is-my#{$infix}-auto {
            margin-bottom: auto !important;
        }

        .is-ml#{$infix}-auto,
        .is-mx#{$infix}-auto {
            margin-left: auto !important;
        }

        .is-table#{$infix} {
            display: table !important;
        }

        .is-table-row#{$infix} {
            display: table-row !important;
        }

        .is-table-cell#{$infix} {
            display: table-cell !important;
        }
    }
}

@each $dimension in $dimensions {
    &.is-#{$dimension}x#{$dimension} {
        height: $dimension * 1px;
        width: $dimension * 1px;
    }
}
